<!-- Import JavaScript Libraries. -->
<html>
    <head>
        <script type="text/javascript" src="web_socket.js"></script>
        <script type="text/javascript" src="lib/jquery/dist/jquery.min.js"></script>
        <!--<script type="text/javascript" src="lib/jquery-ui/ui/minified/jquery-ui.min.js"></script>
        <script type="text/javascript" src="lib/jquery.terminal/js/jquery.terminal-min.js"></script>-->
        <script type="text/javascript" src="lib/lodash/dist/lodash.min.js"></script>
        <style type="text/css">
            /*@import url("lib/jquery-ui/themes/dot-luv/jquery-ui.min.css");
            @import url("lib/jquery-ui/themes/dot-luv/jquery.ui.theme.css");
            @import url("lib/jquery.terminal/css/jquery.terminal.css");*/
            @import url("index.css");
        </style>
        <style>
        </style>

    </head>
    <body>
        <div id="menu">         
            <input id="volume" type="number" name="Volume" min="0" max="100" value="100" title="Volume"/>
            <a id="title">openNARS</a>
        </div>

        <div id="io">

        </div>

        <script type="text/javascript">

            var nlp = 0;
            var websocketPort = 10000;
            var ws = new WebSocket('ws://' + window.location.hostname + ':' + websocketPort);

            var prevOutput = null, currentOutput = null;

            function getLineClass(m) {
                if ((m[0] == '\"') && (m[m.length - 1] == '\"'))
                    return 'comment';
                if (m.trim().indexOf('IN:') == 0)
                    return 'in';
                if (m.trim().indexOf('OUT') == 0)
                    return 'out';
                return null;
            }
            var begin = '<tom --> fast>.\n<tim --> fast>.\n<tim <-> ?what>?';
            function addIO(message) {
                var d = $('<div/>').addClass('section');

                prevOutput = currentOutput;

                if (message && typeof message == "string") {
                    d.append(message + '<br/>');
                    currentOutput = d;
                }
                else {
                    var input = $('<textarea/>').html(begin);


                    begin = '';

                    var outputDiv = $('<div/>').addClass('output');
                    var sendButton = $('<button/>').html('&ldsh;').click(function() {
                        arri = []
                        try {
                            var se = input.val()
                            while (se.indexOf("why") != - 1 || se.indexOf("when") != - 1 || se.indexOf("who") != - 1 || se.indexOf("what") != - 1 || se.indexOf("where") != - 1)
                                se = se.replace("why", "wqhy").replace("when", "wqhen").replace("who", "wqho").replace("what", "wqhat").replace("where", "wqhere")
                            while (se.indexOf("Why") != - 1 || se.indexOf("When") != - 1 || se.indexOf("Who") != - 1 || se.indexOf("What") != - 1 || se.indexOf("Where") != - 1)
                                se = se.replace("Why", "wqhy").replace("When", "wqhen").replace("Who", "wqho").replace("What", "wqhat").replace("Where", "wqhere")
                            ws.send(se);
                            input.attr('readonly', 'true');
                            input.addClass('previousInput');
                            sendButton.remove();
                            addIO();
                        } catch (e) {
                            output('Error: ' + e);
                        }

                    });
                    input.keydown(function(e) {
                        if (e.ctrlKey && e.keyCode == 13) {
                            sendButton.click();
                        }
                    });
                    d.append(input);
                    d.append(sendButton);
                    d.append(outputDiv);
                    currentOutput = outputDiv;
                    setTimeout(function() {
                        input.focus();
                    }, 0);
                }
                $('#io').append(d);
                scrollbottom();
            }
            
            function scrollbottom() {
                $('body').scrollTop($('body').prop('scrollHeight'));
            }
            
            var cnt = 0;
            var arri = [];
            
            function output(m, monospace) {
                if (!prevOutput)
                    prevOutput = currentOutput;
                if (monospace) {
                    if (m.indexOf("ERROR:") == -1) {
                        var line = null;


                        if (nlp == 0)
                            line = m;
                        else
                        {
                            if (m.indexOf("/") != -1 || m.indexOf("\\") != -1 || m.indexOf("|") != -1 || m.indexOf("&") != -1 || m.indexOf("~") != -1)
                                "nope"
                            else
                            {
                                res = m
                                var i = 100
                                while (i > 0 && (m.indexOf("*") != -1 || m.indexOf("-") != -1 || m.indexOf("<") != -1 || m.indexOf(">") != -1 || m.indexOf("(") != -1 || m.indexOf(")") != -1))
                                {
                                    res = res.replace("<->", "is similar to").replace("-->", "is").replace("<", "").replace(">", "").replace(",", " ").replace("(", "\"").replace(")", "\"").replace("* ", "")
                                    i = i - 1
                                }

                                while (res.indexOf(",") != - 1)
                                    res = res.replace(",", " ")
                                //
                                var potential = res.replace(" is ", " is ").replace("somewhat similar", "similar").replace("?1", "what").replace("?2", "what").replace("$1", "what").replace("$2", "what");
                                var addit = 1
                                if (potential.indexOf("IN:") == -1)//if(res.indexOf("%")==-1) //question
                                {
                                    for (var i = 0; i < cnt; i++)
                                    {
                                        if (arri[i] == potential.split("{")[0] && potential.indexOf("IN:") == -1)
                                            addit = 0;
                                    }
                                    if (addit == 1)
                                    {
                                        cnt += 1;
                                        arri.push(potential.split("{")[0]);
                                    }
                                }
                                if (addit)
                                    if (potential.indexOf("%") == -1 || parseFloat(potential.split(";")[1].split("%")[0]) >= 0.5)
                                    {
                                        if (potential.indexOf("OUT:") != -1)
                                        { //you and i handling
                                            while (potential.indexOf(" i?") != - 1 || potential.indexOf(" i!") != - 1 || potential.indexOf(" i.") != - 1 || potential.indexOf(" i ") != - 1)
                                                potential = potential.replace(" i?", " Dyou?").replace(" i!", " Dyou!").replace(" i.", " Dyou.").replace(" i ", " Dyou ")
                                            while (potential.indexOf(" you?") != - 1 || potential.indexOf(" you!") != - 1 || potential.indexOf(" you.") != - 1 || potential.indexOf(" you ") != - 1)
                                                potential = potential.replace(" you?", " i?").replace(" you!", " i!").replace(" you.", " i.").replace(" you ", " i ")
                                            while (potential.indexOf(" Dyou?") != - 1 || potential.indexOf(" Dyou!") != - 1 || potential.indexOf(" Dyou.") != - 1 || potential.indexOf(" Dyou ") != - 1)
                                                potential = potential.replace(" Dyou?", " you?").replace(" Dyou!", " you!").replace(" Dyou.", " you.").replace(" Dyou ", " you ")
                                        }
                                        while (potential.indexOf("is has") != - 1 || potential.indexOf("is have") != - 1 || potential.indexOf("#1") != - 1 || potential.indexOf("#2") != - 1 || potential.indexOf(" i is ") != - 1 || potential.indexOf(" you is ") != - 1)
                                            potential = potential.replace("is has", "has").replace("is have", "have").replace("#1", "something").replace("#2", "something").replace(" i is ", " i am ").replace(" you is ", " you are ")
                                        while (potential.indexOf("--") != - 1)
                                            potential = potential.replace("--", "not")
                                        if (potential.indexOf("==") != -1)
                                            potential = potential.replace("IN: ", "IN: if ")
                                        line = (potential.replace("==", "then").replace("\" not", "\" is").replace("wqhat", "it").replace("wqho", "it").replace("wqhere", "it").replace("wqhat", "it").replace("wqhy", "it").replace("wqho", "it").replace("wqhen", "it"))
                                    }
                            }
                        }
                    }
                    if (line && (line.length > 0)) {
                        var l = $("<pre/>");
                        l.text(line);
                        var lc = getLineClass(m);
                        if (lc)
                            l.addClass(lc);
                        prevOutput.append(l);
                        scrollbottom();
                    }
                }
                else {
                    prevOutput.append("<span>" + m + '</span>\n');
                    scrollbottom();
                }
            }


            $(document).ready(function() {

                ws.onopen = function() {
                    addIO("Connected.");
                    addIO();
                };
                ws.onmessage = function(e) {
                    e.data.split("\n").forEach(function(l) {
                        output(l, true);
                    });
                };
                ws.onclose = function() {
                    addIO("Disconnected.");
                };


            });

            $('#volume').change(function() {
                var volume = $('#volume').val();
                ws.send('*silence=' + volume);
            });
            $('#pauseButton').click(function() {
                ws.send('*stop');
                $('#playButton').removeClass('active');
                $('#pauseButton').addClass('active');
            });
            $('#playButton').click(function() {
                ws.send('*start');
                $('#playButton').addClass('active');
                $('#pauseButton').removeClass('active');
            });

            $('#languageToggle').click(function() {
                nlp = !nlp;
                if (nlp) {
                    $('#languageToggle').addClass('active');
                }
                else {
                    $('#languageToggle').removeClass('active');
                }
            });


        </script>
    </body>
</html>
